<template>
  <div class="myContainer">
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <el-tabs type="border-card">
          <el-tab-pane label="任务基础信息">
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务名称 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务名称" v-model="name" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务状态 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务状态" v-model="status" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务ID :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务ID" v-model="id" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                所属小区 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="所属小区" v-model="areaname" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                所属计划 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="所属计划" v-model="plan_id" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务对象 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务对象" v-model="target_objectname" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务责任人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务责任人" v-model="charge_username" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话" v-model="charge_userphone" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务检查人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务检查人" v-model="check_username" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话" v-model="check_userphone" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务执行人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务执行人" v-model="deal_username" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话" v-model="deal_userphone" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务开始时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务开始时间" v-model="starttime" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务结束时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务结束时间" v-model="endtime" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务完成时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务完成时间" v-model="completetime" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="6" :offset="3">
                <!-- <el-button type="primary" class="myBgGreen" @click="onNextStep">保 存</el-button> -->
                <el-button type="primary" class="myBgGreen" @click="onBack">关 闭</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="任务相关信息">
            <el-container>
              <el-aside style="myContainerLeft_300px">
                <ul class="myTimeAxis">
                  <li v-for="item in timeAxisList">
                    <span class="time">{{item.timestamp}}</span>
                    <span class="line"></span>
                    <span class="circle"></span>
                    <span class="img">
                      <img src="static/images/1cjrw.png" v-if="item.vt=='创建'">
                      <img src="static/images/1cjrw.png" v-if="item.vt=='创建整改任务'">
                      <img src="static/images/4tjclxx.png" v-if="item.vt=='分配'">
                      <img src="static/images/2zpzxry.png" v-if="item.vt=='受理'">
                      <img src="static/images/3qrsd.png" v-if="item.vt=='推送'">
                      <img src="static/images/6zgrw.png" v-if="item.vt=='处理'">
                      <img src="static/images/5jc.png" v-if="item.vt=='核查'">
                      <img src="static/images/5jc.png" v-if="item.vt=='核查任务'">
                      <img src="static/images/4tjclxx.png" v-if="item.vt=='提交'">
                      <img src="static/images/4tjclxx.png" v-if="item.vt=='提交任务'">
                      <img src="static/images/7gd.png" v-if="item.vt=='完成'">
                      <img src="static/images/7gd.png" v-if="item.vt=='完成执行项'">
                      <img src="static/images/7gd.png" v-if="item.vt=='归档'">
                    </span>
                    <span class="promptFont">{{item.vt}}</span>
                  </li>
                </ul>
              </el-aside>
              <el-main class="myPaddingLeft_10px">
                <el-row>
                  <!-- 基本信息框 start -->
                  <el-col :span="24" class="myBorder">
                    <el-row class="myTitle">
                      <el-col>基本信息</el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        操作人员:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="操作人员" v-model="operationName" :readonly="readonly"></el-input>
                      </el-col>
                      <el-col :span="3" class="myLeftMsg">
                        操作时间:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="操作时间" v-model="operationTime" :readonly="readonly"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        处理动作:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="处理动作" v-model="operationAction" :readonly="readonly"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        处理动作描述:
                      </el-col>
                      <el-col :span="19">
                        <el-input type="textarea" placeholder="处理动作描述" v-model="operationDescribe" :readonly="readonly"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px"></el-row>
                  </el-col>
                  <!-- 基本信息框 end -->
                  <!-- 任务信息框 start -->
                  <el-col :span="24" class="myBorder">
                    <el-row class="myTitle">
                      <el-col :span="2">任务信息</el-col>
                      <el-col :span="14">任务当前状态：<span class="status">{{status}}</span></el-col>
                    </el-row>
                    <el-row class="myChildTitle">
                      <el-col :span="24">任务基础信息</el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        所属计划:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="所属计划" v-model="plan_id" :readonly="readonly"></el-input>
                      </el-col>
                      <el-col :span="3" class="myLeftMsg">
                        任务责任人:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务责任人" v-model="charge_username" :readonly="readonly"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        任务开始时间:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务开始时间" v-model="starttime" :readonly="readonly"></el-input>
                      </el-col>
                      <el-col :span="3" class="myLeftMsg">
                        任务检查人:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务检查人" v-model="check_username" :readonly="readonly"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        任务截止时间:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务截至时间" v-model="endtime" :readonly="readonly"></el-input>
                      </el-col>
                      <el-col :span="3" class="myLeftMsg">
                        任务执行人:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务执行人" v-model="deal_username" :readonly="readonly"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        任务完成时间:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务完成时间" v-model="completetime" :readonly="readonly"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myChildTitle">
                      <el-col :span="24">任务内执行项目信息</el-col>
                    </el-row>
                    <!-- <el-row class="myPaddingTop_10px">
                      <el-col :span="8" class="myLeftMsg">
                        <el-input placeholder="输入关键字进行查询"></el-input>
                      </el-col>
                      <el-col :span="3">
                        <el-button type="primary" class="myBgGreen">查 询</el-button>
                      </el-col>
                    </el-row> -->
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="24">
                        <template>
                          <el-table
                            border
                            :data="tableData"
                            style="width: 100%">
                            <el-table-column type="expand">
                              <template slot-scope="props">
                                <el-row>
                                  <el-col :span="2" :offset="2">自检状态:</el-col>
                                  <el-col :span="20" class="myTextAlignLeft">
                                    <span v-if="props.row.deal_status==0" style="color: #f56c6c;">异常</span>
                                    <span v-if="props.row.deal_status==1" style="color: #67c23a;">正常</span>
                                    <span v-if="props.row.deal_status==-1"></span>
                                  </el-col>        
                                </el-row>
                                <el-row class="myPaddingTop_10px">
                                  <el-col :span="2" :offset="2">处理信息:</el-col>
                                  <el-col :span="20" class="myTextAlignLeft">{{props.row.subject_note}}</el-col>        
                                </el-row>
                                <el-row class="myPaddingTop_10px">
                                  <el-col :span="2" :offset="2">图片信息:</el-col>
                                  <el-col :span="20" class="myTextAlignLeft">
                                    <img :src=x.file_path width="300" v-for="x in props.row.attachments" style="margin-right: 10px;"/>
                                  </el-col>        
                                </el-row>
                              </template>
                            </el-table-column>
                            <el-table-column
                              label="序号"
                              type="index"
                              width="100">
                            </el-table-column>
                            <el-table-column
                              label="执行项目"
                              prop="subject_name">
                            </el-table-column>
                            <el-table-column
                              label="检查结论">
                              <template scope="scope">
                                <!-- {{scope.row.check_status | onCheckStatus}} -->
                                <span v-if="scope.row.check_status==0" style="color: #f56c6c;">未通过</span>
                                <span v-if="scope.row.check_status==1" style="color: #67c23a;">通过</span>
                              </template>
                            </el-table-column>
                          </el-table>
                        </template>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px"></el-row>
                  </el-col>
                  <!-- 任务信息框 end -->
                </el-row>
              </el-main>
            </el-container>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    
  </div>

</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myDialogSearchText{
    width: 360px;
  }
  .myContainerLeft_300px{
    width: 300px;
  }
  /*----时间轴效果css start---*/
  .myTimeAxis{
    height: 600px;
    overflow-y:scroll;
  }
  .myTimeAxis>li{
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: relative;
  }
  .myTimeAxis>li:hover{
    background: #f9f9f9;
    cursor: pointer;
  }
  .myTimeAxis>li.on{
    background: #eee;
  }
  .myTimeAxis>li>span{
    float: left;
    position: absolute;
  }
  .time{
    font-size: 12px;
    display: inline-block;
    width: 120px;
    left: 20px;
    white-space: nowrap;
    overflow:hidden;
    color: #898989;
  }
  .line{
    width: 1px;
    height: 100%;
    background: #ddd;
    vertical-align: middle;
    left: 140px;
  }
  .circle{
    width: 13px;
    height: 13px;
    background: #00c6a3;
    top: 50%;
    margin-top: -6.5px;
    left:133.5px;
    border-radius: 50%;
  }
  .img{
    left: 155px;
  }
  .img img{
    position: absolute;;
    top: 16px;
  }
  .promptFont{
    font-size: 14px;
    left: 180px;
    color: #898989;
    width:100px;
    height: 100%;
    overflow:hidden;
  }
  /*----时间轴效果css end---*/
  .myPaddingLeft_10px{
    padding:0 0 0 10px;
  }
  .myBorder{
    border:1px solid #dcdcdc;
    padding: 5px;
    margin-bottom: 10px;
  }
  .myTitle{
    border-bottom: 1px solid #dcdcdc;
    font-size: 14px;
    font-weight: 500;
    height: 25px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myChildTitle{
    border-bottom:1px dashed #dcdcdc;
    padding-left: 20px;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
  }
  .status{
    color: #333;
  }
  .myTextAlignLeft{
    text-align: left;
  }
  /*--------改变滚动条样式 start-------*/
  ::-webkit-scrollbar {  
    width: 6px;
    height:6px;
  }   
  ::-webkit-scrollbar-track {  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;   
  }  
  ::-webkit-scrollbar-thumb { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    border-radius: 10px;  
  }
  /*--------改变滚动条样式 end-------*/
</style>

<script>
  import { getTaskDetail , getTaskTree , taskStatus } from '@/api/maintenanceplan';

  export default {
    data(){
      return{
        timeAxisList:[],//时间轴数据列表
        tableData:[],
        id:"",
        name:"",
        status:"",
        areaid:"",
        plan_id:"",
        target_objectname:"",
        charge_userid:"",
        check_userid:"",
        deal_userid:"",
        createtime:"",
        starttime:"",
        endtime:"",
        completetime:"",
        lastfreshtime:"",
        areaname:"",
        charge_username:"",
        charge_userphone:"",
        check_username:"",
        check_userphone:"",
        deal_username:"",
        deal_userphone:"",
        readonly:true,
        operationName:"",
        operationTime:"",
        operationAction:"",
        operationDescribe:""
      }
    },
    components: {
        
    },
    filters:{
      onCheckStatus(val){
        let status={
          "-1":"", 
          "1":"通过",
          "0":"未通过"
        }
        return status[val];
      }
    },
    created(){
      this.id = this.$route.query.id;
      this.onGetTaskDetail();
      this.onGetTaskTree();
    },
    mounted(){
      document.title = '模板任务计划管理';
      
      this.onSetTreeClick();
    },
    methods:{     
      onNextStep(){

      },
      onBack(){
        this.$router.go(-1);
      },
      onGetTaskDetail(){//拉取任务详细
        let vm=this;
        getTaskDetail(vm.id).then(response => {
          let res=response.data;
          let stu=res.status;
          vm.name=res.name;//任务名称
          vm.status=taskStatus[stu];//任务状态
          vm.areaid=res.areaid;//小区id
          vm.areaname=res.areaname;//小区名
          vm.target_objectname=res.target_objectname;//任务对象
          vm.plan_id=res.plan_id;//所属计划
          vm.charge_userid=res.charge_userid;//责任人id
          vm.charge_username=res.charge_username;//责任人名字
          vm.charge_userphone=res.charge_userphone;//责任人电话
          vm.check_userid=res.check_userid;//检查人id
          vm.check_username=res.check_username;//检查人名字
          vm.check_userphone=res.check_userphone;//检查人电话
          vm.deal_userid=res.deal_userid;//执行人id
          vm.deal_username=res.deal_username;//执行人名字
          vm.deal_userphone=res.deal_userphone;//执行人电话
          vm.createtime=res.createtime;//创建时间
          vm.starttime=res.starttime;//开始时间
          vm.endtime=res.endtime;//结束时间
          vm.completetime=res.completetime;//开始时间
          vm.lastfreshtime=res.lastfreshtime;//任务完成时间
          vm.tableData=res.subjects;
          // console.log("获取任务详细成功",res);
        }).catch(error => {
          // console.log("获取任务详细失败",error);
        })
      },
      onGetTaskTree(){//拉取任务树
        let vm=this;
        getTaskTree(vm.id).then(response => {
          let res=response.data;
          vm.timeAxisList=res;
          //初始化基础信息显示数据
          vm.operationName=vm.timeAxisList[0].username;
          vm.operationTime=vm.timeAxisList[0].timestamp;
          vm.operationAction=vm.timeAxisList[0].vt;
          vm.operationDescribe=vm.timeAxisList[0].username+vm.timeAxisList[0].vt+vm.timeAxisList[0].objectname+vm.timeAxisList[0].result;
          // console.log("拉取任务树成功",res);
          setTimeout(function(){
            vm.onSetTreeClick();
          },100)
        }).catch(error => {
          // console.log("拉取任务树失败",error);
        })
      },
      onSetTreeClick(){
        let vm=this;
        //点击时间轴的操作 start
        $(".myTimeAxis > li:first").addClass("on");
        $(".myTimeAxis > li").click(function(){
          $(this).addClass("on").siblings().removeClass("on");
          //console.log("点击第"+($(this).index()+1)+"个li------"+$(this).find(".promptFont").text());
          vm.operationName=vm.timeAxisList[$(this).index()].username;
          vm.operationTime=vm.timeAxisList[$(this).index()].timestamp;
          vm.operationAction=vm.timeAxisList[$(this).index()].vt;
          vm.operationDescribe=vm.timeAxisList[$(this).index()].username+vm.timeAxisList[$(this).index()].vt+vm.timeAxisList[$(this).index()].objectname+vm.timeAxisList[$(this).index()].result;
        })
        //点击时间轴的操作 end
      }

      

    }
    
  }   


</script>



